import React, {Component, ComponentClass} from 'react';
import Taro from '@tarojs/taro';
import Skeleton from 'taro-skeleton'
import {AtIcon} from 'taro-ui';
import {connect} from 'react-redux';
import {Block, View, Text, Image} from '@tarojs/components';
import {DateType} from '../../reducers/select-date';
import {platform} from '../../utils/platform-settting.service';
import {
  UserIdentity,
  SiteInfo,
  Good,
  ServerNewLimitGoodsDetail,
  LimitOtherGood,
  UpDataDetail,
  ReserveGoods,
  PlatformSet, SubscriptionType
} from '../../utils/server.interface';
import {http} from '../../utils/http';
import {
  ALI_BY_CONDITION,
  ALI_GET_STORE_LIST,
  LIMIT_LIST_APPOINTMENT,
  LIMIT_FROM_SELLER_SINCE,
  OFF_USER_SALE_SUB,
  UPDATE_USER_SHARE_DATE, SCAN_BIND_SELLER,
  IDENTITY_IS_SELLER
} from '../../constants/api';
import {getLianPosterInfo} from '../../utils/poster.service'
import {user} from '../../utils/user.service';
import LimitBar from '../components/detail-bar/limit-bar';
import DetailHeader from '../components/detail-header/detail-header';
import {location} from '../../utils/location.service';
import {
  GetRequest,
  getTempSellerId,
  lastMinute,
  setTempSellerId,
  throttle,
  vcmonitor
} from '../../utils/tools';
import MakePoster from '../components/make-poster/make-poster';
import {newHttp} from "../../utils/request";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import {h5Wx} from "../../utils/h5.service";
import {lxH5Wx} from "../../utils/lx.h5.service";
import '../scenic/detail.scss';
import './detail.scss';
import './localdetailali.scss';

const status: { [key: string]: number } = {selling: 1, beginning: 0, ending: 99, sellout: -1};

type PageStateProps = {
  selectDate: DateType
}

type PageDispatchProps = {}

type PageOwnProps = {}

type PageState = {
  identityIsSeller: UserIdentity | false
  url: string
  itemId: string
  itemName: string
  sharePoster: false | { url: string }
  shopId: string
  api: string
  showCalendar: boolean
  firstGet: boolean
  height: number
  good: ServerNewLimitGoodsDetail | false
  siteInfo: SiteInfo | false
  tabIndex: number
  tabs: { title: string; name: 'notice' | 'desp' | 'appointment' | 'recommend' }[]
  recommendGood: Good[]
  sitePhone: string
  sid?: number
  is_subscribe: number
  siteServiceWx: string
  floatLayout: boolean
  notice: string
  showLoading: boolean
  goodStatus: number
  isLogin: boolean
  btnDisabled: boolean
  otherGood: LimitOtherGood[]
  reserveGoods: ReserveGoods[]
  showAppointment: boolean
  bindSellerId: number
  isHideNavigation: number
  // calendarArr: {date: string; price: number; stock_balance: number;}[];
  calendarArr: { value: string }[]
  openGroup: boolean
  platformSet?: PlatformSet
  oneMinute: boolean
  upDataDetail: UpDataDetail | false
  notices: string
  tempSellerId?: any
  description: string
  isId: boolean
  checkmeal: any
  openMp: SubscriptionType | false
  showNum: number
  localMealId: number
  locationId: number
  productId: number
  shop: any
}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface LoaclDetailAliWeb {
  props: IProps
}

@connect(({selectDate}) => ({
  selectDate,
}), () => ({}))

class LoaclDetailAliWeb extends Component {
  state: PageState = {
    identityIsSeller: false,
    url: '',
    itemId: '',
    itemName: '',
    sharePoster: false,
    showCalendar: false,
    shopId: '',
    api: '',
    firstGet: true,
    isHideNavigation: 0,
    height: 550,
    is_subscribe: 0,
    good: false,
    siteInfo: false,
    tabIndex: 0,
    tabs: [{title: '须知', name: 'notice'}, {title: '介绍', name: 'desp'},],
    recommendGood: [],
    sitePhone: '',
    sid: 0,
    siteServiceWx: '',
    floatLayout: false,
    notice: '',
    tempSellerId: '',
    showLoading: true,
    goodStatus: 1,
    btnDisabled: false,
    isLogin: false,
    otherGood: [],
    reserveGoods: [],
    showAppointment: false,
    bindSellerId: 0,
    calendarArr: [],
    openGroup: false,
    oneMinute: false,
    upDataDetail: false,
    notices: '',
    description: '',
    checkmeal: [],
    isId: false,
    openMp: false,
    showNum: 3,
    localMealId: 0,
    locationId: 0,
    productId: 0,
    shop: []
  }

  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    let platformSet = platform.info
    if (!platform.isLoaded) {
      platformSet = (await platform.getSetting()) || platform.info
    }
    if (platformSet.platformName) {
      Taro.setNavigationBarTitle({
        title: platformSet.platformName
      })
    }
    const isLogin = await user.checkLogin();
    if (isLogin && process.env.DISTINGUISH_IDENTITY) {
      const identityIsSeller = await http.get(IDENTITY_IS_SELLER, {})
      this.setState({identityIsSeller})
    }
    let id = '';
    let isId = false;
    let bindSellerId = Taro.getStorageSync('bindSellerId') || 0;
    const scene = Taro.getCurrentInstance().router.params.scene as string | undefined;
    let bindSellerIds = Taro.getCurrentInstance().router.params.bindSellerId || ''
    let tempSellerIds = Taro.getCurrentInstance().router.params.tempSellerId || ''
    if (scene && (/^\d+_\d+_\d+$/.test(scene) || /^\d+_\d+_\d+_\d+$/.test(scene))) {
      platform.scene = 0;
      const paramArr = scene.split('_'); // [ itemId, sellerId, bindSellerId, sid ] 长度不固定
      if (!paramArr[0] || !paramArr[1] || !paramArr[2]) {
        Taro.showToast({
          title: '无效的参数',
          icon: 'none'
        });
        Taro.switchTab({url: '/pages/index/index'})
        return false;
      }
      if (paramArr[1]) {
        bindSellerIds = paramArr[1]
      }
      if (paramArr[2]) {
        tempSellerIds = paramArr[2]
        setTempSellerId(tempSellerIds)
        this.setState({tempSellerId: paramArr[2]})
      }
      id = paramArr[0];
      isId = true
      if (platformSet.isSellerPermanentLock) {
        if (!bindSellerId) {
          bindSellerId = paramArr[2];
        }
      } else {
        bindSellerId = paramArr[2];
      }
    } else {
      const tempSellerId = getTempSellerId(this)
      this.setState({tempSellerId: tempSellerId})
      if (platformSet.isSellerPermanentLock) {
        if (!bindSellerId) {
          bindSellerId = Taro.getCurrentInstance().router.params.bindSellerId || bindSellerId;
        }
      } else {
        bindSellerId = Taro.getCurrentInstance().router.params.bindSellerId || bindSellerId;
      }

      if (!Taro.getCurrentInstance().router.params || !Taro.getCurrentInstance().router.params.locationId) {
        Taro.showToast({
          title: '无效的参数',
          icon: 'none'
        });
        Taro.navigateBack();
        return false;
      }
      const {itemId} = Taro.getCurrentInstance().router.params;
      id = itemId
    }
    user.bindSellerId = bindSellerId
    Taro.setStorage({
      key: 'bindSellerId',
      data: user.bindSellerId,
    })
    if (bindSellerId) {
      Taro.login({
        success: async (res) => {
          if (res.code) {
            const integralForm = {
              sellerId: bindSellerId,
              code: res.code
            }
            await http.post(LIMIT_FROM_SELLER_SINCE, integralForm);
          } else {
            console.log('登录失败！' + res.errMsg)
          }
        }
      })

    }
    if ((bindSellerIds || tempSellerIds) && process.env.DISTINGUISH_IDENTITY) {
      http.HPost(SCAN_BIND_SELLER, {temp_seller_id: tempSellerIds, refer_seller_id: bindSellerIds});
    }
    const locationId = Taro.getCurrentInstance().router.params.locationId;
    const productId = Taro.getCurrentInstance().router.params.productId;
    const detail = await this.getDetailData(locationId, productId);
    if (detail && detail.images && detail.images.length > 0) {
      if (detail.images) {
        for (let i = 0; i < detail.images.length; i++) {
          detail.imagesList.push(detail.images[i].url)
        }
      }
    }
    if (!detail) {
      Taro.showToast({
        title: '获取详情失败',
        icon: 'none'
      });
      return false
    }
    const good = detail
    const notices = detail.intro
    good['notice'] = ""
    const checkmeal = []
    if (!good.meal_valid_type) {
      if (good.meals && good.meals.length > 0) {
        good.meals.map(item => {
          checkmeal.push(item)
        })
      }
    } else if (good.meal_valid_type == 2) {
      if (good.meals && good.meals.length > 0) {
        good.meals.map(item => {
          checkmeal.push(item)
        })
      }
    }
    this.setState({isLogin, platformSet, good, checkmeal, showLoading: false, locationId, productId}, async () => {
      await this.initData(detail, notices)
      this.setState({bindSellerId})
    })
  }

  makePhone(value) {
    try {
      Taro.makePhoneCall({
        phoneNumber: value
      })
    } catch (e) {
      Taro.showToast({title: '拨打电话失败', icon: 'none'})
    }
  }

  onPullDownRefresh() {
    Taro.stopPullDownRefresh();
  }

  shareParams = ''

  async componentDidShow() {
    vcmonitor(this)
    const isLogin = await user.checkLogin();
    if (platform.subscription.show_place.indexOf("2") > -1) {
      this.setState({
        openMp: platform.subscription
      })
    }
    const tempSellerId = getTempSellerId(this)
    this.setState({tempSellerId})
    let isUser = true
    if (process.env.DISTINGUISH_IDENTITY) {
      const identityIsSeller = await http.get(IDENTITY_IS_SELLER, {})
      isUser = !identityIsSeller.isSeller
    }
    this.shareParams = await user.getSellerParams(this.state.tempSellerId || getTempSellerId(this))
    this.setState({isLogin, isUser})
  }

  async componentDidHide() {
    this.setState({firstGet: false})
  }

  async initData(detail, notices = '', description = '') {
    this.setState({
      siteServiceWx: detail.siteServiceWx || '',
      sitePhone: detail.siteServiceTelephone || '',
      itemId: detail.uuid,
      sid: detail.sid,
      itemName: detail.title,
      showLoading: false,
    })
    const oneMinute = lastMinute(detail.sell_end || 0)
    this.setState({
      otherGood: detail.otherGood || [],
      notices,
      description,
      btnDisabled: true,
      oneMinute
    })
    let tabs = this.state.tabs;
    if (notices && description) {
      tabs = [{title: '须知', name: 'notice'}, {title: '介绍', name: 'desp'}];
    } else {
      tabs = [{title: '介绍', name: 'desp'}];
    }
    this.setState({
      tabs
    })
  }

  async getDetailData(locationId = '', productId = 0) {
    if (locationId && productId) {
      const detail = await newHttp.catchGet(ALI_BY_CONDITION, {cityId: locationId, productNo: productId});
      const shop = await newHttp.catchGet(ALI_GET_STORE_LIST, {cityId: locationId, productNo: productId});
      if (shop) {
        this.setState({shop})
      }
      if (detail) {
        const goods = detail.data
        goods.imagesList = []
        if (goods.images) {
          for (let i = 0; i < goods.images.length; i++) {
            goods.imagesList.push(goods.images[i].url)
          }
        }
        return detail.data
      } else {
        setTimeout(() => {
          Taro.switchTab({url: '/pages/index/index'})
        }, 2000)
        return false
      }
    } else {
      return false
    }
  }

  onShareAppMessage() {
    if (process.env.TARO_ENV !== 'tt') {
      http.post(UPDATE_USER_SHARE_DATE, {})
    }
    if (this.state.good) {
      return {
        path: '/common/limited/localdetail?locationId=' + this.state.good.locationId + '&productId=' + this.state.good.id + '&' + this.shareParams + `&sKey=${Taro.getStorageSync('sKey' || '')}`,
        title: this.state.itemName,
        imageUrl: this.state.good.imageList[0]
      };
    } else {
      return {
        path: '/common/limited/localdetail?locationId=' + this.state.good.locationId + '&productId=' + this.state.good.id + '&' + this.shareParams + `&sKey=${Taro.getStorageSync('sKey' || '')}`,
        title: this.state.itemName,
      }
    }
  }

  onShareTimeline() {
    if (process.env.TARO_ENV !== 'tt') {
      http.post(UPDATE_USER_SHARE_DATE, {})
    }
    const {itemName, itemId, good} = this.state
    if (good) {
      return {
        title: itemName,
        imageUrl: good.imageList[0],
        query: 'locationId=' + this.state.good.locationId + '&productId=' + this.state.good.id + '&itemId=' + itemId + '&' + this.shareParams + `&sKey=${Taro.getStorageSync('sKey' || '')}`,
      }
    } else {
      return {
        title: itemName,
        query: 'locationId=' + this.state.good.locationId + '&productId=' + this.state.good.id + '&itemId=' + itemId + '&' + this.shareParams + `&sKey=${Taro.getStorageSync('sKey' || '')}`,
      }
    }
  }

  async navigate(address: string) {
    if (this.state.platformSet.isHideNavigation == 1) {
      return false;
    }
    Taro.showLoading({title: '导航中...'})
    const ret = await location.getCoordinate(address)
    Taro.hideLoading()
    if (ret) {
      lxH5Wx.navigation(ret.lat, ret.lng, address)
    } else {
      Taro.showToast({title: '导航失败,请检查地址信息,请检测地址', icon: 'none'})
    }
  }

  posterRef = React.createRef<any>();

  async getPoste() {
    const isLogin = await user.checkLogin();
    if (!isLogin) {
      const timer = setTimeout(() => {
        clearTimeout(timer)
        user.jumpLogin()
      }, 500);
      return
    }
    if (this.posterRef.current !== undefined) {
      this.posterRef.current.show();
    }
  }

  async onGetPoster() {
    const isLogin = await user.checkLogin();
    if (!isLogin) {
      const timer = setTimeout(() => {
        clearTimeout(timer)
        user.jumpLogin()
      }, 500);
      return
    }
    Taro.showLoading({title: '获取海报中...'});
    const shareParams = await user.getMovieSellerParams(this.state.tempSellerId)
    const poster = await getLianPosterInfo({
        tempSellerId: this.state.tempSellerId,
        path: '/common/limited/localdetailali?locationId=' + Taro.getCurrentInstance().router.params.locationId + '&productId=' + this.state.good.itemId,
        scene: shareParams
      },
      this.state.good.imagesList[0],
      this.state.good,
      this.state.localMealId,
      'ali')
    Taro.hideLoading();
    if (poster) {
      Taro.navigateTo({url: '/distributor/poster/poster?url=' + poster.url})
    } else {
      Taro.showToast({title: '获取海报失败！', icon: 'none'})
    }
  }

  async navigateOut(latitude, longitude) {
    lxH5Wx.navigation(latitude, longitude)
  }

  async changeGood(uuid) {
    Taro.showLoading({title: '加载中...'});
    const detail = await this.getDetailData(uuid, this.state.bindSellerId);
    if (detail) {
      if (detail.images) {
        for (let i = 0; i < detail.images.length; i++) {
          detail.imagesList.push(detail.images[i].url)
        }
      }
      console.log(detail.imagesList)
      const good = detail
      const {notice, description} = detail
      good['notice'] = ""
      const checkmeal = []
      if (!good.meal_valid_type) {
        if (good.meals && good.meals.length > 0) {
          good.meals.map(item => {
            checkmeal.push(item)
          })
        }
      } else if (good.meal_valid_type == 2) {
        if (good.meals && good.meals.length > 0) {
          good.meals.map(item => {
            checkmeal.push(item)
          })
        }
      }


      this.setState({good, checkmeal}, () => {
        this.initData(good, notice, description);
      })
    }
    Taro.hideLoading();
  }

  async showAppointmentHandle(uuid = '') {
    Taro.showLoading({title: '加载数据中...'});
    const ret = await http.get<{ date: string; price: number; stock_balance: number }[]>(LIMIT_LIST_APPOINTMENT, {goodsUuid: uuid})
    if (ret && ret.length > 0) {
      this.setState({
        calendarArr: ret.map(item => {
          if (item.stock_balance > 0) {
            return {surplusStock: item.surplus_stock, value: item.date}
          } else {
            return {surplusStock: item.surplus_stock, value: false}
          }
        })
      }, () => {
        this.setState({showCalendar: true})
      })
    }
    Taro.hideLoading();

  }

  getMSG() {
    this.setState({
      is_subscribe: 1
    })
  }

  async removeMSG() {
    const {good} = this.state
    const that = this
    const uuid = good.uuid
    const ret = await http.postCar(OFF_USER_SALE_SUB, {goodsUUID: uuid})
    if (ret == '取消成功') {
      that.setState({is_subscribe: 0})
    } else {
      Taro.showToast({title: '取消失败', icon: 'none'})
    }
  }

  handleClickGroup() {
    const openGroup = this.state.openGroup
    this.setState({
      openGroup: !openGroup
    })
  }

  inOneMinute() {
    this.setState({
      oneMinute: true,
      goodStatus: 1
    })
  }

  checkMeal(index) {
    const {good, checkmeal} = this.state
    if (good.meal_valid_type) {
      if (!good.meals[index].check) {
        if (good.meal_valid_num > checkmeal.length) {
          good.meals[index].check = true
        }
      } else {
        good.meals[index].check = false
      }
      const meals = []
      good.meals.map(item => {
        if (item.check) {
          meals.push(item)
        }
      })
      this.setState({
        good, checkmeal: meals
      })

    }
  }

  goPey() {
    const {good, isLogin, checkmeal, upDataDetail} = this.state
    const gooddata = {}
    gooddata['img'] = good.images[0].url
    gooddata['name'] = good.name
    gooddata['price'] = good.price
    gooddata['images'] = good.images
    Taro.setStorage({
      key: "placeOrder",
      data: JSON.stringify(gooddata),
      success: async function () {
        if (!isLogin) {
          user.jumpLogin()
        } else {
          if (good.meal_valid_type && checkmeal.length < good.meal_valid_num) {
            Taro.showToast({
              title: `您还需选${good.meal_valid_num - checkmeal.length}个套餐`,
              icon: 'none',
              duration: 2000
            })
          } else {
            const mealArrId = []
            checkmeal.map(item => {
              mealArrId.push(item.id)
            })
            Taro.setStorageSync("checkmeal", checkmeal)
            if (good.isSelf) {
              Taro.navigateTo({url: '/main/order/place?itemId=' + good.id + '&m=limited'})
            } else {
              Taro.navigateTo({url: '/main/order/confirm?itemId=' + good.id + '&m=limited&meal=' + mealArrId.join(",") + '&zero=' + upDataDetail.can_zero_buy})
            }
          }
        }
      }
    })
  }

  localMeal(index) {
    this.setState({localMealId: index})
  }

  toggleMeals(showNum) {
    const {good} = this.state
    if (showNum == 3) {
      this.setState({showNum: good.meals.length})
    } else {
      this.setState({showNum: 3})
    }
  }

  gotoShopList() {
    Taro.setStorageSync('localShopList', this.state.shop)
    Taro.navigateTo({url: '/common/local-life/list?type=ali'})
  }

  getDateInfo(value) {
    if (!value) {
      return ''
    }
    const date = new Date(value)
    const y = date.getFullYear()
    let MM = date.getMonth() + 1
    MM = MM < 10 ? ('0' + MM) : MM
    let d = date.getDate()
    d = d < 10 ? ('0' + d) : d
    let h = date.getHours()
    h = h < 10 ? ('0' + h) : h
    let m = date.getMinutes()
    m = m < 10 ? ('0' + m) : m
    let s = date.getSeconds()
    s = s < 10 ? ('0' + s) : s
    return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
  }

  initWeek(arr) {
    let string = ''
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] == 1) {
        string += '、' + '星期一'
      } else if (arr[i] == 2) {
        string += '、' + '星期二'
      } else if (arr[i] == 3) {
        string += '、' + '星期三'
      } else if (arr[i] == 4) {
        string += '、' + '星期四'
      } else if (arr[i] == 5) {
        string += '、' + '星期五'
      } else if (arr[i] == 6) {
        string += '、' + '星期六'
      } else if (arr[i] == 7) {
        string += '、' + '星期日'
      }
    }
    string = string.substr(1, string.length)
    return string
  }

  render() {
    const {
      shop,
      localMealId, productId, locationId,
      good,
      sitePhone,
      siteServiceWx,
      showLoading,
      goodStatus,
      btnDisabled,
      isLogin,
      platformSet,
      height,
      is_subscribe,
      oneMinute,
      upDataDetail,
    } = this.state;
    return (
      <View className='limitedDetailRoot'>
        <GzhAuth />
        <Skeleton loading={showLoading}
          title
          titleWidth='100%' rowHeight='275px'
        >
          <View className='swiper-box ali-header'>
            <DetailHeader localState height={height} videoId={good.qq_video_id || ''} mp3={good.mp3 || ''}
              imagesList={(good && good.imagesList.map(item => item)) || []}
              mode='aspectFill'
            />
          </View>
        </Skeleton>
        {good && <Skeleton loading={showLoading}
          title
          titleWidth='100%' rowHeight='150px'
        >
          <View className='local-detail'>
            <View className='local-title'>{good.title}</View>
            <View className='local-desc'>{good.tbCategory3Name}</View>
            <View className='local-price-box'>
              <View className='lt'>
                <View className='xianjia'>
                  <Text className='r-icon'>¥</Text>
                  <Text className='price'>{good.activityPrice}</Text>
                </View>
                <View className='yuanjia'>市场价 ¥{good.originalPrice}</View>
              </View>
              <View className='local-data'>
                {process.env.TARO_ENV !== 'tt' && process.env.P_ENV !== 'hiyogo' && !!platform.info.is_show_stock &&
                  <View>库存:{good.stock}</View>}
                {process.env.TARO_ENV === 'tt' && <View>库存:{good.stock}</View>}
              </View>
            </View>
          </View>
        </Skeleton>}
        {shop && shop.length > 0 && <View className='local-rule-add-box'>
          <View className='local-rule-two'>
            <View className='lt'>
              <View className='lt'>门店</View>
              <View className='info'>
                {shop[0].name}
              </View>
            </View>
            <View onClick={this.gotoShopList.bind(this)} className='rt'>{shop.length}家店适用 <AtIcon size='12px'
              prefixClass='car'
              value='iconright'
              color='#686868'
            /></View>
          </View>
          <View className='local-meal-address'>{shop[0].location.address}</View>
        </View>}
        <Skeleton loading={showLoading}
          title
          titleWidth='100%' rowHeight='50px'
        >
          {!!good && good.itemDetail && good.itemDetail.itemContent && good.itemDetail.itemContent.contentGroups &&
            <View className='local-meal-box'>
              <View className='title'>查看规格</View>
              <View className='local-meal-list'>
                {good.itemDetail.itemContent.contentGroups.map((item, index) =>
                  <View key={index} onClick={this.localMeal.bind(this, index, item)}
                    className={`item  ${localMealId == index ? "local-meal-active" : null}`}
                  >
                    {item.title}
                    {localMealId == index && <Image className='local-meal-img'
                      src='https://resource.ivcheng.com/resources/weapp/images/local-icon.png'
                      mode='widthFix'
                    />}
                  </View>
                )}
              </View>
            </View>}
        </Skeleton>
        <View className='detail-content'>
          {!!good && good.itemDetail && good.itemDetail.itemContent && good.itemDetail.itemContent.contentGroups &&
            <View className='good-content'>
              <View className='title'>规格内容</View>
              <View className='sub-title'>
                <View className='border-left-bor'></View>
                {good.itemDetail.itemContent.contentGroups[localMealId].title}
              </View>
              {good.itemDetail.itemContent.contentGroups[localMealId].contentDetails &&
                good.itemDetail.itemContent.contentGroups[localMealId].contentDetails.map((item, index) =>
                  <View className='info' key={index}>
                    <View className='name'>· {item.name}</View>
                    <View className='unit'>({item.quantity + item.unit})</View>
                    <View className='price'>￥{item.sumPrice}</View>
                  </View>)}
            </View>}

          {!!good && good.itemDetail && good.itemDetail.itemContent && good.itemDetail.itemContent.imageContents && good.itemDetail.itemContent.imageContents.length > 0 &&
            <View className='good-content'>
              <View className='title'>规格图片</View>
              {good.itemDetail.itemContent.imageContents.map((item, index) =>
                <View key={index}>
                  <View className='sub-title'>
                    <View className='border-left-bor'></View>
                    {item.title}
                  </View>
                  {item.urls && item.urls.length > 0 && item.urls.map((val, key) =>
                    <View className='info-image' key={key}>
                      <View className='image-box'>
                        <Image className='img' src={val} mode='widthFix' />
                      </View>
                    </View>)}
                </View>
              )}
            </View>}

          {!!good && good.itemDetail && good.itemDetail.itemTicket &&
            <View className='good-content'>
              <View className='title'>使用时间/有效期</View>
              {!!good && good.itemDetail && good.itemDetail.itemTicket && !!good.itemDetail.itemTicket.ticketTimeRules &&
                <View>
                  <View className='sub-title'>
                    <View className='border-left-bor' />
                    使用时间
                  </View>
                  <View className='info marginLfet time'>
                    {!!good && good.itemDetail && good.itemDetail.itemTicket && good.itemDetail.itemTicket.ticketTimeRules &&
                      <View className='time'>{good.itemDetail.itemTicket.ticketTimeRules[0].hourMinRules}</View>}
                    {!!good && good.itemDetail && good.itemDetail.itemTicket && good.itemDetail.itemTicket.ticketTimeRules && good.itemDetail.itemTicket.ticketTimeRules[0].weekRules &&
                      <View>{this.initWeek(good.itemDetail.itemTicket.ticketTimeRules[0].weekRules)}</View>}
                  </View>
                </View>}
              {!!good && good.itemDetail && good.itemDetail.itemTicket && good.itemDetail.itemTicket.ticketPeriod &&
                <View>
                  <View className='sub-title'>
                    <View className='border-left-bor' />
                    有效期
                  </View>
                  {!!good && good.itemDetail && good.itemDetail.itemTicket && good.itemDetail.itemTicket.ticketPeriod.periodType === 'FIXED' ?
                    <View className='info marginLfet'>
                      {this.getDateInfo(good.itemDetail.itemTicket.ticketPeriod.startTime)} — {this.getDateInfo(good.itemDetail.itemTicket.ticketPeriod.endTime)}
                    </View> :
                    <View className='info marginLfet'>{good.itemDetail.itemTicket.ticketPeriod.period}天</View>}
                </View>}
            </View>
          }
          {!!good && good.itemDetail && good.itemDetail.itemBuyNote.extraNotes && good.itemDetail.itemBuyNote.extraNotes.length > 0 &&
            good.itemDetail.itemBuyNote.extraNotes.map((item, index) =>
              <Block key={index}>
                <View className='good-content'>
                  <View className='title'>{item.title}</View>
                </View>
                {item.contents && item.contents.map((val, key) => <View className='notes marginLfet' key={key}>
                  {val}
                </View>)}
              </Block>
            )}

          {!!good && good.itemDetail && good.itemDetail.itemBuyNote.shopInfo &&
            <View className='good-content'>
              <View className='title'>商家须知</View>
              {good.itemDetail.itemBuyNote.shopInfo.freePark && <View>
                <View className='sub-title'>
                  <View className='border-left-bor'></View>
                  免费停车场
                </View>
              </View>}
              {good.itemDetail.itemBuyNote.shopInfo.freeWifi && <View>
                <View className='sub-title'>
                  <View className='border-left-bor'></View>
                  免费Wifi
                </View>
              </View>}
              {good.itemDetail.itemBuyNote.shopInfo.supplyInvoice && <View>
                <View className='sub-title'>
                  <View className='border-left-bor'></View>
                  提供发票：
                </View>
                {good.itemDetail.itemBuyNote.shopInfo.supplyInvoice &&
                  good.itemDetail.itemBuyNote.shopInfo.invoiceTypes.map((item, index) =>
                    <View className='info marginLfet' key={index}>
                      {item}
                    </View>)}
              </View>}
            </View>
          }
        </View>
        <View style={{height: "100px"}} />
        <LimitBar
          commissionPrice={good.commissionPrice}
          isLL={1} isShowShareButton showLoading={showLoading} uuid={good.uuid} platformSet={platformSet}
          oneMinute={oneMinute}
          isSaler={good.status} subscribe={is_subscribe} groupDetail={null} groupBuyId={null}
          inSale={good.status} zeroBuy={upDataDetail.can_zero_buy}
          showService={Boolean(good.is_show_customer_service)} getMSG={this.getMSG.bind(this)}
          removeMSG={this.removeMSG.bind(this)} onGotoBuy={() => {
          if (!isLogin) {
            user.jumpLogin()
          } else {
            Taro.navigateTo({url: '/main/order/payali?productNo=' + productId + '&cityId=' + locationId})
          }
        }} onGotoHome={() => {
          Taro.switchTab({url: '/pages/index/index'})
        }} status={goodStatus} disabled={btnDisabled}
          onGetPoster={throttle(this.onGetPoster.bind(this), 200)}
          onContact={() => {
            Taro.navigateTo({url: `/distributor/contact/contact${sitePhone ? '?phone=' + sitePhone + (siteServiceWx ? '&weixin=' + siteServiceWx : '') : (siteServiceWx ? '?weixin=' + siteServiceWx : '')}`})
          }}
        />
        {!showLoading && <MakePoster
          cref={this.posterRef}
          lianlainPath={'/common/limited/localdetailali?locationId=' + locationId + '&productId=' + productId + '&scene=' + this.shareParams}
          friendsArr={good.imagesList}
          posterType='ali'
          good={good}
          uuid={good.itemId}
          text={good.title}
          itemId={good.itemId}
          showButton={false}
          onGetPoster={async () => {
            await this.onGetPoster()
          }}
        />}
      </View>

    );
  }
}

export default LoaclDetailAliWeb as ComponentClass<PageOwnProps, PageState>;
